<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>扫一扫 - 二维码扫描</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

        <!-- 配置Tailwind自定义颜色和字体 -->
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            primary: '#165DFF',
                            secondary: '#00C48C',
                            neutral: {
                                100: '#F5F7FA',
                                200: '#E4E6EB',
                                300: '#C9CDD4',
                                400: '#86909C',
                                500: '#4E5969',
                                600: '#272E3B',
                                700: '#1D2129',
                            }
                        },
                        fontFamily: {
                            inter: ['Inter', 'sans-serif'],
                        },
                    },
                }
            }
        </script>

        <style type="text/tailwindcss">
            @layer utilities {
                .content-auto {
                    content-visibility: auto;
                }
                .backdrop-blur-sm {
                    backdrop-filter: blur(4px);
                }
                .scanner-glass {
                    position: absolute;
                    width: 240px;
                    height: 240px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border: 2px solid rgba(255, 255, 255, 0.7);
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
                    z-index: 10;
                }
                .scanner-line {
                    position: absolute;
                    width: 100%;
                    height: 2px;
                    background: linear-gradient(90deg, rgba(22, 93, 255, 0) 0%, rgba(22, 93, 255, 0.8) 50%, rgba(22, 93, 255, 0) 100%);
                    animation: scan 2s linear infinite;
                }
                @keyframes scan {
                    0% { top: 0; }
                    50% { top: 100%; }
                    100% { top: 0; }
                }
                .pulse {
                    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                }
                @keyframes pulse {
                    0%, 100% { opacity: 1; }
                    50% { opacity: 0.5; }
                }
                .fade-in {
                    animation: fadeIn 0.5s ease-in-out;
                }
                @keyframes fadeIn {
                    0% { opacity: 0; }
                    100% { opacity: 1; }
                }
                .slide-up {
                    animation: slideUp 0.5s ease-out;
                }
                @keyframes slideUp {
                    0% { transform: translateY(20px); opacity: 0; }
                    100% { transform: translateY(0); opacity: 1; }
                }
            }
        </style>
    </head>
    <body class="font-inter bg-neutral-700 text-white min-h-screen">
        <!-- 顶部导航栏 -->
        <header class="fixed top-0 left-0 right-0 z-50 bg-neutral-700/80 backdrop-blur-sm border-b border-neutral-600">
            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
                <div class="flex items-center">
                    <button id="back-btn" class="text-white p-2 rounded-full hover:bg-neutral-600/50 transition-colors">
                        <i class="fa-solid fa-arrow-left"></i>
                    </button>
                    <h1 class="ml-2 text-lg font-semibold">扫一扫</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="text-white p-2 rounded-full hover:bg-neutral-600/50 transition-colors">
                        <i class="fa-solid fa-lightbulb"></i>
                    </button>
                    <button class="text-white p-2 rounded-full hover:bg-neutral-600/50 transition-colors">
                        <i class="fa-solid fa-image"></i>
                    </button>
                </div>
            </div>
        </header>

        <!-- 扫描区域 -->
        <main class="pt-16 pb-24">
            <div class="relative h-[calc(100vh-4rem)]">
                <!-- 摄像头预览 -->
                <div id="camera-container" class="absolute inset-0 overflow-hidden">
                    <video id="video" class="w-full h-full object-cover"></video>

                    <!-- 扫描框 -->
                    <div class="scanner-glass">
                        <div class="scanner-line"></div>

                        <!-- 扫描框角落装饰 -->
                        <div class="absolute top-0 left-0 w-8 h-8 border-t-4 border-l-4 border-primary rounded-tl-lg"></div>
                        <div class="absolute top-0 right-0 w-8 h-8 border-t-4 border-r-4 border-primary rounded-tr-lg"></div>
                        <div class="absolute bottom-0 left-0 w-8 h-8 border-b-4 border-l-4 border-primary rounded-bl-lg"></div>
                        <div class="absolute bottom-0 right-0 w-8 h-8 border-b-4 border-r-4 border-primary rounded-br-lg"></div>
                    </div>

                    <!-- 扫描提示 -->
                    <div class="absolute bottom-20 left-0 right-0 text-center">
                        <p class="text-white text-sm opacity-90">将二维码放入框内，即可自动扫描</p>
                        <div class="mt-3 flex justify-center space-x-2">
                            <span class="w-2 h-2 rounded-full bg-primary pulse"></span>
                            <span class="w-2 h-2 rounded-full bg-primary/70 pulse" style="animation-delay: 0.2s"></span>
                            <span class="w-2 h-2 rounded-full bg-primary/50 pulse" style="animation-delay: 0.4s"></span>
                        </div>
                    </div>
                </div>

                <!-- 扫描结果显示区域 (默认隐藏) -->
                <div id="result-container" class="absolute inset-0 bg-neutral-700/95 backdrop-blur-sm z-20 flex items-center justify-center hidden fade-in">
                    <div class="bg-neutral-800 rounded-xl p-6 w-full max-w-md mx-4 shadow-xl slide-up">
                        <div class="text-center mb-4">
                            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/20 text-primary mb-4">
                                <i class="fa-solid fa-check text-2xl"></i>
                            </div>
                            <h2 class="text-xl font-semibold">扫描结果</h2>
                        </div>

                        <div id="result-content" class="mb-6 text-center">
                            <p class="text-neutral-300">链接已复制到剪贴板</p>
                            <a href="#" id="result-link" class="text-primary hover:underline mt-2 block break-all"></a>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <button id="copy-btn" class="py-3 px-4 bg-neutral-700 hover:bg-neutral-600 rounded-lg transition-colors flex items-center justify-center">
                                <i class="fa-solid fa-copy mr-2"></i>
                                <span>复制链接</span>
                            </button>
                            <button id="open-btn" class="py-3 px-4 bg-primary hover:bg-primary/90 rounded-lg transition-colors flex items-center justify-center">
                                <i class="fa-solid fa-external-link-alt mr-2"></i>
                                <span>打开链接</span>
                            </button>
                        </div>

                        <button id="scan-again-btn" class="mt-4 w-full py-3 px-4 bg-neutral-700 hover:bg-neutral-600 rounded-lg transition-colors">
                            <i class="fa-solid fa-qrcode mr-2"></i>
                            <span>再次扫描</span>
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部工具栏 -->
        <footer class="fixed bottom-0 left-0 right-0 bg-neutral-800/90 backdrop-blur-sm border-t border-neutral-700 py-3 px-4">
            <div class="container mx-auto">
                <div class="grid grid-cols-4 gap-2">
                    <button class="flex flex-col items-center justify-center p-2 rounded-lg hover:bg-neutral-700/50 transition-colors">
                        <i class="fa-solid fa-qrcode text-xl mb-1"></i>
                        <span class="text-xs">扫码</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-2 rounded-lg hover:bg-neutral-700/50 transition-colors">
                        <i class="fa-solid fa-barcode text-xl mb-1"></i>
                        <span class="text-xs">条码</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-2 rounded-lg hover:bg-neutral-700/50 transition-colors">
                        <i class="fa-solid fa-image text-xl mb-1"></i>
                        <span class="text-xs">相册</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-2 rounded-lg hover:bg-neutral-700/50 transition-colors">
                        <i class="fa-solid fa-lightbulb text-xl mb-1"></i>
                        <span class="text-xs">闪光灯</span>
                    </button>
                </div>
            </div>
        </footer>

        <script>
            // 页面加载完成后执行
            document.addEventListener('DOMContentLoaded', function() {
                const video = document.getElementById('video');
                const resultContainer = document.getElementById('result-container');
                const resultLink = document.getElementById('result-link');
                const scanAgainBtn = document.getElementById('scan-again-btn');
                const copyBtn = document.getElementById('copy-btn');
                const openBtn = document.getElementById('open-btn');
                const backBtn = document.getElementById('back-btn');

                let stream = null;
                let scanning = false;

                // 初始化摄像头并开始扫描
                function startScanner() {
                    // 检查浏览器是否支持getUserMedia
                    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                        alert('您的浏览器不支持摄像头访问，请使用最新版本的Chrome、Firefox或Safari。');
                        return;
                    }

                    // 设置摄像头约束条件
                    const constraints = {
                        video: { facingMode: 'environment' } // 使用后置摄像头
                    };

                    // 获取摄像头流
                    navigator.mediaDevices.getUserMedia(constraints)
                        .then(function(mediaStream) {
                            stream = mediaStream;
                            video.srcObject = stream;
                            video.setAttribute('playsinline', true); // iOS Safari 支持
                            video.play();
                            scanning = true;
                            requestAnimationFrame(tick);
                        })
                        .catch(function(err) {
                            console.error('摄像头访问错误: ', err);
                            alert('无法访问摄像头，请确保您已授予摄像头权限。');
                        });
                }

                // 扫描循环
                function tick() {
                    if (!scanning) return;

                    if (video.readyState === video.HAVE_ENOUGH_DATA) {
                        const canvas = document.createElement('canvas');
                        canvas.height = video.videoHeight;
                        canvas.width = video.videoWidth;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

                        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

                        // 使用jsQR库识别二维码
                        const code = jsQR(imageData.data, imageData.width, imageData.height, {
                            inversionAttempts: "dontInvert",
                        });

                        if (code) {
                            scanning = false;
                            showResult(code.data);
                        }
                    }

                    requestAnimationFrame(tick);
                }

                // 显示扫描结果
                function showResult(data) {
                    resultLink.href = data;
                    resultLink.textContent = data;

                    // 复制到剪贴板
                    navigator.clipboard.writeText(data)
                        .then(() => {
                            console.log('链接已复制到剪贴板');
                        })
                        .catch(err => {
                            console.error('复制失败: ', err);
                        });

                    // 显示结果面板
                    resultContainer.classList.remove('hidden');
                }

                // 重新开始扫描
                scanAgainBtn.addEventListener('click', function() {
                    resultContainer.classList.add('hidden');
                    scanning = true;
                    requestAnimationFrame(tick);
                });

                // 复制链接按钮
                copyBtn.addEventListener('click', function() {
                    const text = resultLink.textContent;
                    navigator.clipboard.writeText(text)
                        .then(() => {
                            alert('链接已复制到剪贴板');
                        })
                        .catch(err => {
                            console.error('复制失败: ', err);
                            alert('复制失败，请手动复制。');
                        });
                });

                // 打开链接按钮
                openBtn.addEventListener('click', function() {
                    window.open(resultLink.href, '_blank');
                });

                // 返回按钮
                backBtn.addEventListener('click', function() {
                    if (stream) {
                        stream.getTracks().forEach(track => {
                            track.stop();
                        });
                    }
                    window.history.back();
                });

                // 页面卸载时停止摄像头流
                window.addEventListener('beforeunload', function() {
                    if (stream) {
                        stream.getTracks().forEach(track => {
                            track.stop();
                        });
                    }
                });

                // 启动扫描器
                startScanner();
            });
        </script>
    </body>
</html>

